<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=vi"></script> 

<script>

    $(function(){

        var citiesRefID = $.parseJSON('<?php echo json_encode($citiesRefID)?>');
        var districtsRefID = $.parseJSON('<?php echo json_encode($districtsRefID)?>');

        var districtsDataGroupByCity = $.parseJSON('<?php echo json_encode($districtsDataGroupByCity)?>');
        var districtsGeoGroupByCity = $.parseJSON('<?php echo json_encode($districtsGeoGroupByCity)?>');

        function kmcompare(a,b) {
            if (a.km < b.km) return -1;
            if (a.km > b.km) return 1;
            return 0;
        }

        function google_map(latlng) {
            var latlng = latlng.split(",");
            var lat = latlng[0];
            var lng = latlng[1];

            var center_position = new google.maps.LatLng(lat, lng);
            var marker_position = new google.maps.LatLng(lat, lng);
            var marker;
            var map;

            var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: center_position,

                panControl: false,
                zoomControl: true,
                //                          zoomControlOptions: {
                //                              style: google.maps.ZoomControlStyle.LARGE,
                //                              position: google.maps.ControlPosition.TOP_LEFT
                //                          },
                streetViewControl: false
            };

            map = new google.maps.Map(document.getElementById('map'), mapOptions);

            marker = new google.maps.Marker({
                map:map,
                draggable:true,
                animation: google.maps.Animation.DROP,
                position: marker_position,
                icon : new google.maps.MarkerImage('/files/img/red_flag.png',
                    new google.maps.Size(69,48),
                    new google.maps.Point(0,0),
                    new google.maps.Point(35,48)
                ),
                shadow: new google.maps.MarkerImage('/files/img/red_flag_shadow.png',
                    new google.maps.Size(97,48),
                    new google.maps.Point(0,0),
                    new google.maps.Point(35,48)
                )
            }); 
            google.maps.event.addListener(marker, 'click', function(){
                if (marker.getAnimation() != null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });

            google.maps.event.addListener(marker, 'dragend', function(){
                var loc = marker.getPosition();
                var lat = roundNumber(loc.lat(),6);
                var lng = roundNumber(loc.lng(),6);
                $('#PublicLocation_latlng').val(lat+','+lng);
                $('#latlng_view').val(lat+','+lng);


                // public location
                var city_id = $("#PublicLocation_city_id").val();
                var districtsGeo = [];

                $("#PublicLocation_districts").html('');
                $.each(districtsGeoGroupByCity[city_id], function(key, value){
                    var km = getDistanceFromLatLonInKm(lat, lng, value.lat, value.lng);
                    var km = roundNumber(km,3);
                    if(km <= <?php echo Yii::app()->params->kmNear*10?>){
                        var loc = {
                            km : km,
                            id: key,
                            name: value.name,
                            lat: value.lat,
                            lng: value.lng
                        }
                        districtsGeo.push(loc);
                    }
                });
                districtsGeo.sort(kmcompare);
                // set public location cookie
                $.cookie('public_location_create', JSON.stringify(districtsGeo));
                
                // display pubic location 
                $.each(districtsGeo, function(index, loc){
                    var selected = (loc.km <= <?php echo Yii::app()->params->kmNearSelected*4?>) ? 'selected="selected"' : '';
                    $("#PublicLocation_districts").append('<option '+selected+' value="'+loc.id+'">'+loc.name+'</option>');   
                });


            });


        }    
        google_map(<?php echo ($model->latlng) ? "'{$model->latlng}'" : 'citiesRefID[$("#PublicLocation_city_id").val()].latlng'?>);


        $("#PublicLocation_city_id").change(function(){
            var city_id = $(this).val();

            $("#PublicLocation_districts").html('');
            $.each(districtsDataGroupByCity[city_id], function(key, value){
                $("#PublicLocation_districts").append('<option value="'+key+'">'+value+'</option>');
            });

            google_map(citiesRefID[city_id].latlng);

            $('#PublicLocation_latlng').val(citiesRefID[city_id].latlng);
            $('#latlng_view').val(citiesRefID[city_id].latlng);


        });

        $("#PublicLocation_district_id").change(function(){
            var district_id = $(this).val();
            var city_id = $("#PublicLocation_city_id").val();

            if(district_id == 0) return false;

            var latlng = districtsRefID[district_id].latlng != '' ? districtsRefID[district_id].latlng : citiesRefID[city_id].latlng;
            google_map(latlng);

            $('#PublicLocation_latlng').val(districtsRefID[district_id].latlng);
            $('#latlng_view').val(districtsRefID[district_id].latlng);
        });

    });   
</script>



<?php $form=$this->beginWidget('CActiveForm', array(
        'id'=>'publicLocation-form',
        'enableClientValidation'=>true,
        'clientOptions'=>array(
            'validateOnSubmit'=>true,
        ),
        'enableAjaxValidation'=>true,
        'htmlOptions' => array('class' => 'stdform stdformsmall')
    )); ?>

<div class="row-fluid">
    <div class="span7">
        <h4 class="widgettitle">Tọa độ địa điểm công cộng</h4>
        <div class="widgetcontent">
            <div id="map" style="float:left; width: 548px; height: 300px; box-shadow: 2px 2px 6px #AAAAAA;">
                <div style="text-align: center; line-height: 300px; color: #999">Tải bản đồ từ google ...</div>
            </div>            
        </div>
    </div>
    <div class="span5">
        <h4 class="widgettitle">Thông tin địa điểm công cộng</h4>
        <div class="widgetcontent">
            <div class="par control-group">
                <?php echo $form->labelEx($model,'name', array('class' => 'control-label')); ?>
                <div class="controls">
                    <?php echo $form->textField($model,'name', array('class' => 'input')); ?>
                    <?php echo $form->error($model,'name');?>
                    <?php echo $form->error($model,'alias');?>
                </div>
            </div>
            
            <div class="par control-group">
                <?php echo $form->labelEx($model,'city_id', array('class' => 'control-label')); ?>
                <div class="controls">
                    <?php echo $form->dropDownList($model,'city_id', $citiesData, array('class' => 'input')); ?>
                    <?php echo $form->error($model,'city_id');?>
                </div>
            </div>

            <div class="par control-group">
                <?php echo $form->labelEx($model,'districts', array('class' => 'control-label')); ?>
                <div class="controls">
                    <?php echo $form->dropDownList($model,'districts', $districtsData, array('class' => '', 'multiple' => 'multiple', 'size' => 10)); ?>
                    <?php echo $form->error($model,'districts');?>
                </div>
            </div>

            <div class="par control-group">
                <?php echo $form->labelEx($model,'latlng', array('class' => 'control-label')); ?>
                <div class="controls">
                    <?php echo $form->hiddenField($model,'latlng'); ?>
                    <?php echo CHtml::textField('latlng_view', $model->latlng, array('class' => 'input uniformselect', 'disabled'=>'disabled')); ?>
                    <?php echo $form->error($model,'latlng');?>
                </div>
            </div>

        </div>
    </div>
</div>


<p>
    <button class="btn btn-info btn-large" type="submit">Tạo địa điểm</button>
</p>
<?php $this->endWidget(); ?>